<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二、外部样式表：按照页面简易结构添加对应css -->
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/style.css" />
		
		
		<style>
			.sticky{
				position: fixed;
				top: 0;
				width: 100%;
			}
		</style>
			<script src="js/jquery-1.11.1.js"></script>		
	</head>
	<body>
		 <script>
		$(function(){
			/* //鼠标移动到顶部内容区域---弹出文本：我是顶部元素
			$(".top_context").mouseenter(function(){
				//BOM形式输出：浏览器弹窗输出文本效果
				alert("我是顶部元素");
			});
			}); */
			//吸顶灯效果---【了解】BOM案例：浏览器6个对象的方法使用
			//思路：1.鼠标滚动，滚动吸顶灯元素位置处，效果改变
			//     2.页面顶部到吸顶灯位置：200px，大于200px
			//     3.追加第一个样式：固定定位，页面顶部位置
			
			//     1.追加样式：吸顶灯卡在页面顶部
			//     2.固定值：页面顶部到吸顶灯位置
			//     3.固定值>滚动值，滚动范围超过200px  实现切换
			
			
			//固定值：页面顶部到吸顶灯位置---BOM语法
			//
			//
			var se=$("nav").offset().top;
			
			//滚动值：BOM对象+事件源
			//$(window)抓取页面window对象，监听窗口事件：窗口改变，滚动
			//理解：实时抓取页面滚动值
			$(window).scroll(function(){
			//滚动值：获取页面滚动位置
			//scrollTop（）获取页面滚动垂直距离
			var st=$(window).scrollTop();
			
			
			//判断  固定值大于滚动值，滚动超过200，实现切换：吸顶效果
			if(st>se){
				//条件成立：大于200px 切换吸顶效果
				$("nav").addClass("sticky");
			}else{
				//条件不成立：小于200px
				$("nav").removeClass("sticky");
			}
			});
			});
		</script>
		<!-- 一、html结构简易三层结构
		 语义化标记：header、main、footer
		 【替代div+别名有利于SEO优化】
		 -->
		 <header>
			 <!-- 两列布局  起别名  id用于定位 class微调-->
			 <!-- 中控区：页面两侧留白，控制整页内容宽度-->
			 <div id="wrapper">
			 	<div class="head_left">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="#">MIUI</a></li>
						<li><a href="#">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">小米网移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#" class="c">Select Region</a></li>
					</ul>
					
				</div>
			 	<div class="head_right">
					<ul>
						<!-- 精灵图使用  后缀.icon
						 1.使用文本样式元素补位：i、s、b、u
						 2.使用矢量图.png【不失真】，icon存入png
						 好处：避免多次起名，减少服务器请求
						 3.使用内边距，文本样式【撑大】674
						 4.如果是用矢量图：精灵图模式  需要定位-->
						<li class="li_right"><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
						<li><a href="#" class="c">注册</a></li>
						<li><a href="#">登录</a></li>
					</ul> 
        </div>
		<script>
							$("header div#wrapper div.head_right ul li.li_right").hover(function(){
								$("header div#wrapper div.head_right ul div.outs").css("display","block");
							},function(){
								$("header div#wrapper div.head_right ul div.outs").css("display","none");
							});
						</script>
    </div>
    <div class="clearfix"></div></div>
			 </div>
		 </header>
		 <main>
			 <!-- 面包屑导航  结构化元素 nav 导航-->
			 <nav><!--  面包屑导航：左右布局，切片3块，宽高-->
			 <div id="mbz">
				 <div class="logo"><img src="img/team_logo.png"><img src="img/donghua.gif">
				    
				 </div>
			
				<ul>
					<li><a href="#">小米盒子</a></li>
				    <li><a href="#">红米</a></li>
				    <li><a href="#">平板</a></li>
				    <li><a href="#">电视</a></li>
				    <li><a href="#">盒子</a></li>
				    <li><a href="#">路由器</a></li>
				    <li><a href="#">智能硬件</a></li>
				    <li><a href="#">服务</a></li>
				    <li ><a href="#">社区</a></li>
				</ul> 
			<div class="search">
			    	<div class="search_box"><img src="img/search.png"></div>
			        <span>平衡车</span>
			        <span>小米手机4c</span>
			    </div>
			    <div class="clearfix"></div>
			 </div>
			 </nav>
			 <!-- 左栏区-->
			 <aside></aside>
			 <!-- 轮播图 结构化元素：图片、图标、代码片段-->
			 <figure>
				 <!-- 轮播图 id和class命名问题，提醒：重名 -->
				 <!-- 1.轮播图主空间区域 -->
				 <div class="main">
				 <!--2.id="animation"轮播图空间范围  -->
				 <div id="animation"></div>
				 <!-- 3.class="" -->
				 <div class="container">
				 	<div class="banner" id="lazyload">
				 		<!-- 放图片 -->
				 		<ul>
				 			<li><img src="img/banner01.jpg" alt="1" /></li>
				 			<li><img src="img/banner02.jpg" alt="2" /></li>
				 			<li><img src="img/banner03.jpg" alt="3" /></li>
				 			<li><img src="img/banner04.jpg" alt="4" /></li>
				 			<li><img src="img/banner05.jpg" alt="5" /></li>
				 		</ul>
				 		
				 	</div>
				 </div>
				 </div>
				 
				 <script src="js/highlight.pack.js"></script>
				 <script src="js/jquery-1.11.1.js"></script>
				 <script src="js/jquery.terseBanner.min.js"></script>
				 <script src="js/script.js"></script>
			 </figure>
			 <section>
			 			 <div id="event">
			 				 <ul>
			 				 	<li><img src="img/left.png" alt="" /></li>
			 				 	<li><img src="img/subnav_icon01.png" alt="" /></li>
			 				 	<li><img src="img/subnav_icon02.jpg" alt="" /></li>
			 				 	<li><img src="img/subnav_icon03.png" alt="" /></li>
			 				 </ul>
			 			 </div>
			 </section>
			 <!-- --------------------------------------->
	<div class="star">
		<div class="single">
			<h1 style="font-size: 20px;color: #000;">小米明星单品</h1>
			<div class="right_btn"></div>
			<div class="left_btn"></div>
		</div>
			 
			 <div class="container_star">
			 	<dl> 
			 		<dt><img src="img/chazuo.png" alt="插座"></dt>
			 		<dd>小米智能插座 基础班</dd>
			 		<dd class="product_content">手机远程遥控，让普通电器变智能</dd>
			 		<dd class="product_price">49元</dd>
			 	</dl>
				
			 </div>
			 <div>
				 <div class="container_star">
				 <dl> 
				 	<dt><img src="img/jinghuaqi.png" alt="净化器"></dt>
				 	<dd>小米空气净化器2</dd>
				 	<dd class="product_content">净化能力高达310m3/h</dd>
				 	<dd class="product_price">699元</dd>
				 </dl>
			 </div>
			 <div>
				 <div class="container_star">
			 				 <dl> 
			 				 	<dt><img src="img/chaban.png" alt="插线板"></dt>
			 				 	<dd>小米智能插线板</dd>
			 				 	<dd class="product_content">手机远程控制家中电器，智能节电</dd>
			 				 	<dd class="product_price">69元</dd>
			 				 </dl>
			 </div>
			 <div>
				 <div class="container_star">
			 				 <dl> 
			 				 	<dt><img src="img/erji.png" alt="耳机"></dt>
			 				 	<dd>小米圈铁耳机</dd>
			 				 	<dd class="product_content">动圈+动铁，双发声单元</dd>
			 				 	<dd class="product_price">69元</dd>
			 				 </dl>
			 </div>
			 <div>
				 <div class="container_star">
			 				 <dl> 
			 				 	<dt><img src="img/luyouqi.png" alt="路由器"></dt>
			 				 	<dd>小米路由器 青春版</dd>
			 				 	<dd class="product_content">将高性能路由器，凝聚于掌心大小</dd>
			 				 	<dd class="product_price">79元</dd>
			 				 </dl>
			 </div>
			 
			  </div>
			  
			  <!-- 智能硬件-->
			  				 <div class="bg">
			  				 	
			  					<div class="hardware_box">
			  						<div class="hardware">
			  							智能硬件
			  							<img style="float:left;" src="img/haraw are_kid.png"/>
			  							<a href="#">查看全部</a>
			  						</div>
			  						<div class="kidwatch">
			  							<p style="font-size: 24px; font-weight: normal; margin-top: 57px;">米兔儿童电话手表</p>
			  							<p style="font-size: 16px; margin-top: 14px;color: #333;">安全防走失，宝贝的贴身护卫</p>
			  							<p style="margin-top: 34px;font-size: 30px; color: #00a8ff;font-family: century Gothic;">299<a style="font-size: 14px">元</a></p>
			  						    
			  						</div>
									
			  						<div class="hardware_right">
			  							<div class="hardware_top">
			  								<div class="content">
			  									<dl>
			  										<dt><img src="img/haraware_tizhongcheng.png" alt="体重秤"></dt>
			  										<dd class="name">小米体重秤</dd>
			  										<dd class="product_content">高精度压力传感器，手机管理全家健康</dd>
			  										<dd class="product_price">99元</dd>
			  																				
			  									</dl>
			  								</div>
			  								<div class="content">
			  									<dl>
			  										<dt><img src="img/haraware_luyouqi.png" style="margin-top: 0;" alt="路由其"></dt>
			  										<dd class="name">小米路由器3</dd>
			  										<dd class="product_content">更安全更稳定，安全发售</dd>
			  										<dd class="product_price">149元</dd>
			  																				
			  									</dl>
			  								</div>
			  								<div class="content">
			  									<dl>
			  										<dt><img src="img/haraware_shouhuan.png" style="margin-top: 0;"  alt="小米手环"></dt>
			  										<dd class="name">小米手环 光感版</dd>
			  										<dd class="product_content">实时监测心率，科学运动</dd>
			  										<dd class="product_price">99元</dd>
			  																				
			  									</dl>
			  								</div>
			  								<div class="content4">
			  									<dl>
			  										<dt><img src="img/haraware_anfang.png" style="margin-top: 0;" alt="安防"></dt>
			  										<dd class="name">小米智能安防套装</dd>
			  										<dd class="product_content">智能警戒，为您的家增添一份安心</dd>
			  										<dd class="product_price">699元</dd>
			  																				
			  									</dl>
			  								</div>
			  							</div>
			  							<div class="hardware_bottom">
			  								<div class="content">
			  									<dl>
			  										<dt><img src="img/haraware_xiaoyi.png" style="margin-top: 0;" alt="运动相机"></dt>
			  										<dd class="name">小米运动相机</dd>
			  										<dd class="product_content">边玩边录边拍，手机随时分享</dd>
			  										<dd class="product_price">399元</dd>
			  																				
			  									</dl>
			  								</div>
			  								<div class="content">
			  									<dl>
			  										<dt><img src="img/haraware_xieya.png" style="margin-top: 0;" alt="血压计"></dt>
			  										<dd class="name">iHealth智能血压计（蓝牙版）</dd>
			  										<dd class="product_content">送给父母的健康礼物</dd>
			  										<dd class="product_price">199元</dd>
			  																				
			  									</dl>
			  								</div>
			  								<div class="content">
			  									<dl>
			  										<dt><img src="img/haraware_shexiangtou.png" style="margin-top: 0;" alt="摄像机"></dt>
			  										<dd class="name">小米智能摄像机 夜视版</dd>
			  										<dd class="product_content">能看能听能说，手机远程观看</dd>
			  										<dd class="product_price">149元</dd>
			  																				
			  									</dl>
			  								</div>
			  								<div class="content4">
			  									<dl>
			  										<dt><img src="img/haraware_light.png" style="margin-top: 0;" alt="床头灯"></dt>
			  										<dd class="name">Yeelight床头灯</dd>
			  										<dd class="product_content">触摸式操作，给卧室1600万种颜色</dd>
			  										<dd class="product_price">699元</dd>
			  																				
			  									</dl>
			  								</div>
			  							</div>
			  						</div>
			  					
								</div>
			  					<!-- 搭配 -->
			  					<div class="dapei_box">
			  						<div class="dapei">
			  							搭配
			  							<ul>
			  								<li>热门</li>
			  								<li>耳机音箱</li>
			  								<li>电源</li>
			  								<li>电池储存卡</li>
			  							</ul>
			  						</div>
			  						<div class="dapei_topbox">
			  							<div class="content" style="width: 234px;">
			  								<img src="img/dapei_icon01.png" width="234px" height="290px"/>
			  							</div>
			  							<div class="content">
			  								<dl>
			  								<dt><img src="img/dapei_icon03.png" style="margin-top: 40px;" alt="床头灯"></dt>
			  								<dd class="name">小米路由器3</dd>
			  								<dd class="product_content">更安全更稳定，安全发售</dd>
			  								<dd class="product_price">149元</dd>									
			  							</div>
			  							<div class="content">
			  								<dl>
			  								<dt><img src="img/dapei_icon04.png" style="margin-top: 50px;" alt="床头灯"></dt>
			  								<dd class="name">小米手环 光感版</dd>
			  								<dd class="product_content">实时监测心率，科学运动</dd>
			  								<dd class="product_price">99元</dd>									
			  								</dl>
			  							</div>
			  							<div class="content">
			  								<dl>
			  								<dt><img src="img/dapei_icon05.png" style="margin-top: 100px;" alt="床头灯"></dt>
			  								<dd class="name" style="margin-top: 65px;">小米智能安防套装</dd>
			  								<dd class="product_content">智能警戒，为您的家增添一份安心</dd>
			  								<dd class="product_price">699元</dd>									
			  								</dl>
			  							</div>
			  							<div class="content4">
			  								<dl>
			  								<dt><img src="img/dapei_icon06.png" style="margin-top: 40px;" alt="床头灯"></dt>
			  								<dd class="name" style="margin-top: 20px;">小米运动相机</dd>
			  								<dd class="product_content">边玩边录边拍，手机随时分享</dd>
			  								<dd class="product_price">399元</dd>									
			  								</dl>
			  							</div>
			  							</div>
			  							
			  						<div class="dapei_bottombox">
			  							<div class="content" style="width: 234px;">
			  								<img src="img/dapei_icon02.png" width="234px" height="290px"/>
			  							</div>
			  							<div class="content">
			  								<dl>
			  								<dt><img src="img/dapei_icon07.png" style="margin-top: 40px;" alt="床头灯"></dt>
			  								<dd class="name">小米智能摄像机 夜视版</dd>
			  								<dd class="product_content">能看能听能说，手机远程观看</dd>
			  								<dd class="product_price">149元</dd>									
			  								</dl>
			  							</div>
			  							<div class="content">
			  								<dl>
			  								<dt><img src="img/dapei_icon08.png" style="margin-top: 40px;" alt="床头灯"></dt>
			  								<dd class="name"style="margin-top: 26px;">小米智能摄像机 夜视版</dd>
			  								<dd class="product_content">能看能听能说，手机远程观看</dd>
			  								<dd class="product_price">149元</dd>									
			  								</dl>
			  							</div>
			  							<div class="content">
			  								<dl>
			  								<dt><img src="img/dapei_icon09.png" style="margin-top: 60px;" alt="床头灯"></dt>
			  								<dd class="name">小米智能摄像机 夜视版</dd>
			  								<dd class="product_content">能看能听能说，手机远程观看</dd>
			  								<dd class="product_price">149元</dd>									
			  								</dl>
			  							</div>
			  							<div class="content4">
			  								<img src="img/content-top_icon01.png" width="205px" />
			  								<img src="img/content-top_icon02.png" width="205px" style="margin-top: 20px;" />
			  							</div>	
			  						</div>
			  						</div>
			  						<div class="dapei_box">
			  							<div class="dapei">
			  								周边
			  								<ul>
			  								<li>热门</li>
			  								<li>服装</li>
			  								<li>米兔</li>
			  								<li>生活周边</li>
			  								<li>箱包</li>
			  								</ul>
			  							</div>
			  							<div class="dapei_topbox">
			  								<div class="content" style="width: 234px;">
			  									<img src="img/peijian_icon01.png" width="234px" height="290px"/>
			  								</div>
			  								<div class="content">
			  									<dl>
			  									<dt><img src="img/peijian_icon03.png" style="margin-top: 40px;" alt="床头灯"></dt>
			  									<dd class="name">小米金属鼠标垫 小号</dd>
			  									
			  									<dd class="product_price">49元</dd>
			  									<dd class="product_content">6483人评价</dd>									
			  								</div>
			  								<div class="content">
			  									<dl>
			  									<dt><img src="img/peijian_icon04.png" style="margin-top: 50px;" alt="床头灯"></dt>
			  									<dd class="name">小米皮质记事本</dd>
			  									<dd class="product_price">19元</dd>	
			  									<dd class="product_content">3050人评价</dd>		
			  									</dl>
			  								</div>
			  								<div class="content">
			  									<dl>
			  									<dt><img src="img/peijian_icon05.png" style="margin-top: 50px;" alt="床头灯"></dt>
			  									<dd class="name">小米LED随身灯 增强版</dd>
			  									<dd class="product_price">19.9元</dd>	
			  									<dd class="product_content">5.6万人评价</dd>		
			  									</dl>
			  								</div>
			  								<div class="content4">
			  									<dl>
			  									<dt><img src="img/peijian_icon06.png" style="margin-top: 50px;" alt="床头灯"></dt>
			  									<dd class="name">手机支架 小蜜蜂</dd>
			  									<dd class="product_price">19元</dd>	
			  									<dd class="product_content">6.9万人评价</dd>		
			  									</dl>
			  								</div>
			  							</div>
			  							<div class="dapei_bottombox">
			  								<div class="content" style="width: 234px;">
			  									<img src="img/peijian_icon02.png" width="234px" height="290px"/>
			  								</div>
			  								<div class="content">
			  									<dl>
			  									<dt><img src="img/peijian_icon07.png" style="margin-top: 40px;" alt="床头灯"></dt>
			  									<dd class="name">小米防尘塞 MI标</dd>
			  									
			  									<dd class="product_price">3.9元</dd>
			  									<dd class="product_content">5.6万人评价</dd>									
			  								</div>
			  								<div class="content">
			  									<dl>
			  									<dt><img src="img/peijian_icon08.png" style="margin-top: 50px;" alt="床头灯"></dt>
			  									<dd class="name">小米智能摄像机 夜视版</dd>
			  									<dd class="product_price">149元</dd>	
			  									<dd class="product_content">8461人评价</dd>		
			  									</dl>
			  								</div>
			  								<div class="content">
			  									<dl>
			  									<dt><img src="img/peijian_icon09.png" style="margin-top: 50px;" alt="床头灯"></dt>
			  									<dd class="name">小米电源线收纳盒</dd>
			  									<dd class="product_price">39元</dd>	
			  									<dd class="product_content">8461人评价</dd>		
			  									</dl>
			  								</div>
			  								<div class="content4">
			  									<img src="img/peijian_icon10.png" width="205px" />
			  									<img src="img/content-top_icon02.png" width="205px" style="margin-top: 20px;" />
			  								</div>
			  							</div>
			  						</div>
			  						<div class="dapei_box">
			  							<div class="dapei">
											配件
																			<ul>
																				<li>热门</li>
																				<li>保护壳</li>
																				<li>后盖</li>
																				<li>贴膜</li>
																				<li>其他配件</li>
																			</ul>
																		</div>
																		<div class="dapei_topbox">
																			<div class="content" style="width: 234px;">
																				<img src="img/zhoubian_icon01.png" width="234px" height="290px"/>
																			</div>
																			<div class="content">
																				<dl>
																				<dt><img src="img/zhoubian_icon03.png" style="margin-top: 40px;" alt="床头灯"></dt>
																				<dd class="name">小米金属鼠标垫 小号</dd>
																				
																				<dd class="product_price">49元</dd>
																				<dd class="product_content">6483人评价</dd>									
																			</div>
																			<div class="content">
																				<dl>
																				<dt><img src="img/zhoubian_icon04.png" style="margin-top: 50px;" alt="床头灯"></dt>
																				<dd class="name">小米皮质记事本</dd>
																				<dd class="product_price">19元</dd>	
																				<dd class="product_content">3050人评价</dd>		
																				</dl>
																			</div>
																			<div class="content">
																				<dl>
																				<dt><img src="img/zhoubian_icon05.png" style="margin-top: 50px;" alt="床头灯"></dt>
																				<dd class="name">小米LED随身灯 增强版</dd>
																				<dd class="product_price">19.9元</dd>	
																				<dd class="product_content">5.6万人评价</dd>		
																				</dl>
																			</div>
																			<div class="content4">
																				<dl>
																				<dt><img src="img/zhoubian_icon06.png" style="margin-top: 50px;" alt="床头灯"></dt>
																				<dd class="name">手机支架 小蜜蜂</dd>
																				<dd class="product_price">19元</dd>	
																				<dd class="product_content">6.9万人评价</dd>		
																				</dl>
																			</div>
																		</div>
																		<div class="dapei_bottombox">
																			<div class="content" style="width: 234px;">
																				<img src="img/zhoubian_icon02.png" width="234px" height="290px"/>
																			</div>
																			<div class="content">
																				<dl>
																				<dt><img src="img/zhoubian_icon07.png" style="margin-top: 40px;" alt="床头灯"></dt>
																				<dd class="name">小米防尘塞 MI标</dd>
																				
																				<dd class="product_price">3.9元</dd>
																				<dd class="product_content">5.6万人评价</dd>									
																			</div>
																			<div class="content">
																				<dl>
																				<dt><img src="img/zhoubian_icon08.png" style="margin-top: 50px;" alt="床头灯"></dt>
																				<dd class="name">小米智能摄像机 夜视版</dd>
																				<dd class="product_price">149元</dd>	
																				<dd class="product_content">8461人评价</dd>		
																				</dl>
																			</div>
																			<div class="content">
																				<dl>
																				<dt><img src="img/zhoubian_icon09.png" style="margin-top: 50px;" alt="床头灯"></dt>
																				<dd class="name">小米电源线收纳盒</dd>
																				<dd class="product_price">39元</dd>	
																				<dd class="product_content">8461人评价</dd>		
																				</dl>
																			</div>
																			<div class="content4">
																				<img src="img/zhoubian_icon10.png" width="205px" />
																				<img src="img/content-top_icon02.png" width="205px" style="margin-top: 20px;" />
																			</div>
																		</div>
																	</div>
																	<!-- 热评产品 -->
																	<div class="reping_box">
																		<div class="reping">热评产品</div>
																		<div class="hotproduct">
																			<img src="img/hotproduct_icon01.png" width="267px"/>
																			<div class="judge">
																				<p>超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</p>
																				<h1>来自于 香草忘忧 的评价</h1>
																				<a>米兔手机U盘</a>
																				<span style="color: #ff6700;">49.9元</span>
																			</div>
																		</div>
																		<div class="hotproduct">
																			<img src="img/hotproduct_icon02.png" width="267	px"/>
																			<div class="judge">
																				<p>绝对5星，音质挺好，包装也不错，物流也快</p>
																				<h1 style="margin-top: 53px;">来自于 星星活火 的评价</h1>
																				<a>小米活塞耳机 标准版</a>
																				<span style="color: #ff6700;">49.9元</span>
																			</div>	
																		</div>
																		<div class="hotproduct">
																			<img src="img/hotproduct_icon03.png" width="267px"/>
																			<div class="judge">
																				<p>做工没的说，摸起来非常细腻，而且比传统的插板稳固</p>
																				<h1 style="margin-top: 53px;">来自于 林新城 的评价</h1>
																				<a>小米插线板</a>
																				<span style="color: #ff6700;">49.9元</span>
																			</div>	
																		</div>
																		<div class="hotproduct1">
																			<img src="img/hotproduct_icon04.png" width="267px"/>
																			<div class="judge">
																				<p>一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</p>
																				<h1 style="margin-top: 53px;">来自于 人生如戏 的评价</h1>
																				<a>小米头戴式耳机 标准版</a>
																				<span style="color: #ff6700;">499元</span>
																			</div>	
																		</div>
																	</div>
																	<div class="classify_box">
																								<div class="classify">内容</div>
																								<div class="neirong" style="border-top: 1px solid rgb(255, 172, 19);margin-top: 0px;">
																									<ul style="list-style: none;">
																										<li style="font-size: 16px;color: #ffac13;margin-bottom: 25px;">图书</li>
																										<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">阿弥陀佛，么么哒</a></li>
																										<li style="font-size: 12px;color: b0b0b0;margin-bottom: 5px;">大冰新书，12个不舍得读完的、暖心</li>
																										<li style="font-size: 12px;color: b0b0b0;margin-bottom: 20px;">的，真实的江湖故事</li>
																										<li style="font-size: 16px;color: #333;">9.99元</li>
																										<li><img src="img/classify_icon01.png" style="margin-left: auto;margin-left: auto;margin-top: 32px;"/></li>
																									</ul>
																								</div>
																								<div class="neirong" style="border-top: 1px solid rgb(131, 196, 78);margin-top: 0px;">
																									<ul style="list-style: none;">
																										<li style="font-size: 16px;color: #83c44e;margin-bottom: 25px;">主题</li>
																										<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">主题市场</a></li>
																										<li style="font-size: 12px;color: b0b0b0;margin-bottom: 5px;">众多个性主题、百变锁屏与自由桌面</li>
																										<li style="font-size: 12px;color: b0b0b0;margin-bottom: 20px;">让你的手机与众不同！</li>
																										<li style="font-size: 16px;color: #333;">MIUI</li>
																										<li><img src="img/classify_icon02.png" style="margin-left: auto;margin-left: auto;margin-top: 32px;"/></li>
																									</ul>
																								</div>
																								<div class="neirong" style="border-top: 1px solid rgb(229, 57, 53);margin-top: 0px;">
																									<ul style="list-style: none;">
																										<li style="font-size: 16px;color: #e53935;margin-bottom: 25px;">游戏</li>
																										<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">米柚手游模拟器</a></li>
																										<li style="font-size: 12px;color: b0b0b0;margin-bottom: 35px;">在电脑上玩遍小米所有手游</li>
																										<li style="font-size: 16px;color: #333;">免费</li>
																										<li><img src="img/classify_icon03.png" style="margin-left: auto;margin-left: auto;margin-top: 70px;"/></li>
																									</ul>
																								</div>
																								<div class="neirong1" style="border-top: 1px solid rgb(33, 150, 243);margin-top: 0px;">
																									<ul style="list-style: none;">
																										<li style="font-size: 16px;color: 	#00aaff;margin-bottom: 25px;">应用</li>
																										<li style="margin-bottom: 10px;"><a href="#"  style="font-size: 20px;color: #333;">2015年度应用</a></li>
																										<li style="font-size: 12px;color: b0b0b0;margin-bottom: 35px;">精彩世界，尽情下载</li>
																										<li style="font-size: 16px;color: #333;">免费</li>
																										<li><img src="img/classify_icon04	.png" style="margin-left: auto;margin-left: auto;margin-top: 70px;"/></li>
																									</ul>
																								</div>
																							</div>
																							<div class="shipin_box">
																								<div class="shipin">
																									视频
																									<img src="img/hardware_morebtn.png" style="float: right;"/>
																									<a href="#" style="float: right;font-size: 18px;margin-right: 10px;color: #333;">查看更多</a>
																								</div>
																								<div class="shipin1">
																									<img src="img/video_play.png" class="play"/>
																									<img src="img/video_icon01.jpg" width="267px"/>
																									<h1>笑喷了，沈腾爆笑出演，6集联播</h1>
																									<h2>小米Max沈腾爆笑预告全集</h2>
																								</div>
																								<div class="shipin1">
																									<img src="img/video_play.png" class="play"/>
																									<img src="img/video_icon02.jpg" width="267px"/>
																									<h1>小米2016春季新品发布会</h1>
																									<h2>小米5 十余项黑科技亮相</h2>
																								</div>
																								<div class="shipin1">
																									<img src="img/video_play.png" class="play"/>
																									<img src="img/video_icon03.jpg" width="267px"/>
																									<h1>15秒了解小米5 有多快</h1>
																									<h2>华少用超快语速告诉你小米5 到底有多快</h2>
																								</div>
																								<div class="shipin2">
																									<img src="img/video_play.png" class="play"/>
																									<img src="img/video_icon04.jpg" width="267px"/>
																									<h1>《去探索》 小米年度品牌视频</h1>
																									<h2>与小米一起探索黑科技</h2>
																								</div>
																							</div>
																						</div>
																					 </div>
		 </main>
		 <footer>
			 <div class="head">
			 				<div class="head1">
			 				<ul class="zis">
			 					<li><a href="#"><img src="./img/footer_icon01.png" alt="" />1小时快修服务</a></li>
			 					<li class="z1"><a href="#"><img src="./img/footer_icon02.png" alt="" />7天无理由退货</a></li>
			 					<li class="z2"><a href="#"><img src="./img/footer_icon03.png" alt="" />15天免费换修</a></li>
			 					<li class="z3"><a href="#"><img src="./img/footer_icon04.png" alt="" />满150元包邮</a></li>
			 					<li class="z4"><a href="#"><img src="./img/footer_icon05.png" alt="" />520余家售后网点</a></li>
			 				</ul>
			 				<ul class="shuxian">
			 					<li class="s1"></li>
			 					<li class="s2"></li>
			 					<li class="s3"></li>
			 					<li class="s4"></li>
			 				</ul>
			 			</div>
			 <div class="footer_container">
			<!-- 帮助中心栏 -->
			<div class="column"><h3>帮助中心栏</h3>
			<ul>
				<li><a href="#">购物指南</a></li>
				<li><a href="#">支付方式</a></li>
				<li><a href="#">配送方式</a></li>
			</ul></div>
			<!-- 服务支持栏 -->
			<div class="column"><h3>服务支持栏</h3>
			<ul>
				<li><a href="#">售后政策</a></li>
				<li><a href="#">自助服务</a></li>
				<li><a href="#">相关下载</a></li>
			</ul></div>
			<!-- 线下门店栏 -->
			<div class="column"><h3>线下门店栏</h3>
			<ul>
				<li><a href="#">小米之家</a></li>
				<li><a href="#">服务网点</a></li>
				<li><a href="#">线下专区</a></li>
			</ul></div>
			<!-- 关于小米栏 -->
			<div class="column"><h3>关于小米栏</h3>
			<ul>
				<li><a href="#">了解小米</a></li>
				<li><a href="#">加入小米</a></li>
				<li><a href="#">联系我们</a></li>
			</ul></div>
			<!-- 关注我们栏 -->
			<div class="column"><h3>关注我们栏</h3>
			<ul>
				<li><a href="#">新浪微博</a></li>
				<li><a href="#">小米部落</a></li>
				<li><a href="#">官方微信</a></li>
			</ul></div>
			<!-- 特色服务栏 -->
			<div class="column"><h3>特色服务栏</h3>
			<ul>
				<li><a href="#">F码通道</a></li>
				<li><a href="#">小米移动</a></li>
				<li><a href="#">防伪查询</a></li>
			</ul></div>
			<!-- 右侧栏：客服信息栏 -->
			<div class="column contact_column">
				<h3>400-100-5678</h3>
				<p>周一至周日 8:00-18:00</p>
				<p>(仅收市话费)</p>
				<a href="#">24小时在线客服</a>
			</div>
			
		</div>
		
		</footer>
	</body>
</html>
